<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom结构-1</title>
</head>
<body>


  <div id="container">
    <div id="box1">box1</div>
    <div id="box2">box2</div>

  </div>

</body>
<script>
     /**
      *   访问结构
      *      parentElement
      *      children
      *      nextSibling
      * */

    var box1= document.getElementById('box1');
    var container= document.getElementById('container');

     var parentE= box1.parentElement;

     var sblingE = box1.nextElementSibling;

      var childrenE=container.children;

     console.log(parentE);
     console.log(sblingE);
     console.log(childrenE);
     console.log(childrenE[0]);
     childrenE[1].innerHTML ='hello';

     //parentE.innerHTML = '<h1>其他的都消失了</h1>'


</script>

</html>